:root:has(.dark-color) {
    --font-color:			0deg 0% 100%;
    --font-alpha:			75%;
    --bg:					hsl(0deg 0% 80% / .05);
    --s-bg:					hsl(0deg 0% 80% / .1);
    --w-bg:					hsl(0deg 0% 80% / .1);
    --h-bg:					hsl(0deg 0% 0%);
}

.fancybox-div .button.close {
    position: fixed;
    inset: auto var(--gap-divs) var(--gap-divs);
    width: fit-content;
    margin: auto;
    z-index: 2;
}
.comment-respond button.close {
    display: none;
}

.fancybox__content.comment-respond {
    max-width: calc(var(--content-size) + var(--edge-lr)* 2);
}

.fancybox-tip {
    --fancybox-bg:
            radial-gradient(circle at 25% 65%, hsl(var(--main-color) / .2), #0000 25%) no-repeat local,
            radial-gradient(circle at 75% 35%, hsl(var(--subs-color) / .2), #0000 25%) no-repeat local
            var(--s-bg, hsl(0 0% 100% / .8)) !important;
    padding: var(--edge-lr);
}
.fancybox-tip img {
    border-radius: var(--radius) !important;
}

html.with-fancybox {
    overflow: hidden;
}

.f-button {
    --f-button-svg-width: 50% !important;
    --f-button-svg-height: 50% !important;
    --f-button-border-radius: var(--f-button-width) !important;
    --f-button-hover-bg: hsl(var(--main-color) / .7) !important;
    --f-button-hover-color: white !important;
    --f-button-svg-filter: none !important;
}
.fancybox__content>.f-button.is-close-btn {
    position: fixed;
    color: #fff;
    inset: auto 0 var(--gap-divs) !important;
    margin: 0 auto;
    align-self: center;
    background: linear-gradient(135deg, var(--bg) 20%, hsl(var(--main-color) / .8) 30%, hsl(var(--subs-color) / .8) 70%, var(--bg) 80%) 50% / 300% 100%;
    box-shadow: 0 0 1rem 0 hsl(var(--main-color) / .2), 0 0.5rem 1rem -0.5rem hsl(var(--main-color) / .5);
    border-radius: 50%;
    opacity: 1;
}
.fancybox__content.comment-respond {
    max-width: calc(var(--content-size) + var(--edge-lr)* 2);
}
.fancybox__container.fancybox-tip .f-button.is-close-btn {
    bottom: -2rem !important;
}
.fancybox__backdrop {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
    padding: 0;
}
.fancybox__container {
    --fancybox-bg: var(--s-bg, hsl(0 0% 100% / 1)) !important;
    --fancybox-color: hsl(var(--font-color) / var(--font-alpha)) !important;
    --fancybox-content-color: hsl(var(--font-color) / var(--font-alpha)) !important;
    --fancybox-content-bg: none !important;
}
.fancybox__content {
    padding: var(--edge-lr);
}
.fancybox__toolbar {
    --f-button-width:3em !important;
    --f-button-height:3em !important;
    --f-button-bg: none !important;
    font-family: inherit;
    text-shadow: none;
    flex-wrap: wrap;
    margin: .5em !important;
}
.fancybox__toolbar__column {
    align-items: center;
    background: var(--bg) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--f-button-width);
    flex: unset !important;
    gap: 1rem;
}
.fancybox__infobar {
    font-size:var(--font-size-small) !important;
    padding: 0 .5em !important;
    margin: 0 0 0 -.5em !important;
}
.fancybox__footer {
    background: var(--w-bg) !important;
    box-shadow: var(--box-shadow) !important;
    border-radius: var(--radius) !important;
    text-align: center;
    text-wrap: balance;
    margin: .5em;
    font-size: var(--font-size-small);
}
.fancybox__caption a {
    color: hsl(var(--main-color) / .7);
    line-height: 1;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: hsl(var(--subs-color) / .1) linear-gradient(90deg, hsl(var(--main-color) / .7), hsl(var(--main-color) / .7)) no-repeat 100% 100% / 0 100% !important;
    border-radius: 2em;
    font-size: .8em;
    padding: .5em .75em;
    margin: 0 .5em;
    vertical-align: middle;
}
.fancybox__caption a:hover {
    color: white !important;
    background-position-x: 0 !important;
    background-size: 100% 100% !important;
}
